<template>
	<view class="page" :class="{minH: isTab==1}">
		<status-bar :title='title' :back='isTab==1?0:1' :goHome='fromShare'></status-bar>
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		<!-- 顶部分类 -->
		<scroll-view class="classNav" :style="{top: navHeight+'px'}" :scroll-into-view="checkId<3?'list-0':'list-'+checkId"
		 scroll-x="true" scroll-with-animation="true" v-if='columnData'>
			<view class="classNavItem" :style="{'--color': color}" :class="checkId==-1?'thmeColor':''" @click="checkList(-1,list_id_bak)"
			 v-if='isTab!=1'>全部</view>
			<view class="classNavItem" :id='"list-"+s_index1' :style="{'--color': color}" :class="checkId==s_index1?'thmeColor':''"
			 v-for='(sort,s_index1) in columnData' :key='s_index1' @click="checkList(s_index1,sort.website_list_id)">
				{{sort.website_list_title}}
			</view>
		</scroll-view>
		<!-- 分类结束-->
		
		
		
		<view class="indexContens" v-if='artList' :class="columnData?'paddingTop':''">
			<view class="itemsLists" v-for='(art,index) in artList' :key='index'>
				<navigator :url="'/otherPage/article/artDetail?artId='+art.website_article_id" hover-class="none">
					<view class='rl flex-box' v-if='art.website_article_atlas.length < 1'>
						<view class="leftHeadImg" v-if='art.website_article_img'>
							<image :src="imgUrl+art.website_article_img" mode="aspectFill"></image>
						</view>
						<view class="rightText" style="flex:1">
							<view class="username0">
								<p v-if='art.website_article_info'>{{art.website_article_title}}</p>
								<p v-else style='-webkit-line-clamp: 4;'>{{art.website_article_title}}</p>
							</view>
							<view class="textCont" v-if='art.website_article_info'>{{art.website_article_info}}</view>
						</view>
					</view>
					<view class="ImgCont" v-else>
						<view class="username1">
							{{art.website_article_title}}
						</view>
						<view class='imgAll' v-if='art.website_article_atlas.length > 1'>
							<image v-for='(pic,index1) in art.website_article_atlas' :key='index1' :src="imgUrl+pic" mode="aspectFill"></image>
						</view>
						<view class='imgOne' v-else>
							<image v-for='(pic,index1) in art.website_article_atlas' :key='index1' :src="imgUrl+pic" mode="aspectFill"></image>
						</view>
					</view>
					<!-- <video class="videoCont" src="/static/1.mp4" controls></video> -->
					<view class="looks">
						<view class="leftDate">
							<text>{{art.articleSource}}</text><text>{{art.website_article_addtime}}</text>
						</view>
						<view class="rightData">
							<view>{{art.website_article_views}} 阅读</view>
						</view>
					</view>
				</navigator>
			</view>
			<empty v-if='nothing' type='1' cat='3' msg='没有找到相关内容哦 ~'></empty>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		props: ['title','tab'],
		data() {
			return {
				navHeight: getApp().globalData.navHeight,
				color: getApp().globalData.color,
				artList: [], // 文章列表
				columnData: '', // 分类列表
				imgUrl: this.imgUrl,
				list_id: '', //列表id
				page: 1, // 分页页码
				more: false,
				nothing: false,
				toTop: false,
				checkId: -1,
				staticUrl: this.staticUrl,
				list_id_bak: '',
				fromShare:0,
				isTab: this.tab
			}
		},
		onLoad(options) {
			let that = this;
			
			if(options.fromShare){
				that.fromShare = options.fromShare
			}
			if (options.listId) {
				that.list_id = options.listId;
				that.list_id_bak = options.listId;
				that.getList();
			}
		},
		created() {
			let that = this;
			
		},
		mounted() {
			let that = this;
			that.artList = [];
		},
		onShareAppMessage(option) {
			let that = this;
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=5&listId=' + this.list_id,
				imageUrl: shareData.imageUrl
			}
		},
		onPageScroll(ev) {
			let that = this;
			if (ev.scrollTop > 100) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onPullDownRefresh() {
			let that = this;
			that.artList = [];
			that.page = 1;
			that.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			getCloumn() {
				let that = this;
				that.$http.post({
					url: '/zzj_singleSaleApi/getWebsiteList',
					data: {
						bid: uni.getStorageSync('bid')
					}
				}).then(res => {
					if (res.data) {
						that.columnData = res.data;
						if (!that.list_id) {
							that.checkId = 0
							that.list_id = res.data[0].website_list_id;
						}
						that.getList();
					} else {
						that.nothing = true
					}
				})
			},
			time(t) {
				let that = this;
				return that.$common.timeFormat(t, 'Y/M/D h:m')
			},
			checkList(index, listId) {
				let that = this;
				if (that.checkId != index) {
					that.checkId = index;
					that.artList = [];
					that.page = 1;
					uni.showLoading({
						title: '加载中'
					})
					that.list_id = listId
					that.getList();
				}
			},
			getList() {
				let that = this;
				that.more = false
				that.nothing = false
				that.$http.post({
					url: '/zzj_singleSaleApi/getArticle',
					data: {
						bid: uni.getStorageSync('bid'),
						listId: that.list_id,
						pagecount: 10,
						page: that.page
					}
				}).then(res => {
					uni.hideLoading()
					if (res.columnData) {
						that.columnData = res.columnData;
					}

					if (res.data) {
						res.data.forEach((item, index) => {
							if (item.website_article_atlas) {
								item.website_article_atlas = item.website_article_atlas.split(",");
							}
						})
						if(that.page == 1){
							that.artList = res.data;
						}else{
							that.artList = that.artList.concat(res.data);
						}
						
						if (res.data.length > 9) {
							that.more = true;
						}
						uni.setNavigationBarTitle({
							title: res.listTitle
						})
						that.title = res.listTitle
					}
					
					if (!that.artList || that.artList.length < 1)
						that.nothing = true
					// #ifdef H5
					this.H5Share('pageType=5&listId=' + that.list_id, {
						title: res.data && res.data.listTitle ? res.data.listTitle : '',
						desc: '',
						imageUrl: ''
					})
					// #endif
				})
			}
		},
		onReachBottom() {
			let that = this;
			if (that.more) {
				that.page += 1;
				that.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		&.minH{
			min-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		}
	}

	.classNav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 33;
		height: 80upx;
		border-bottom: 2upx solid #dedede;
		background: #FFFFFF;
		white-space: nowrap;
	}

	.classNavItem {
		display: inline-block;
		padding: 24upx;
		background: #FFFFFF;
		position: relative;
		height: 80upx;

	}

	.classNavItem:before {
		position: absolute;
		content: '';
		width: 1upx;
		height: 50%;
		background: #dedede;
		left: 0%;
		top: 25%;
	}

	.classNavItem:nth-child(1):before {
		display: none;
	}

	.indexContens {
		width: 100%;
		padding: 0 30upx;
		background: #FFFFFF;
	}

	.paddingTop {
		padding-top: 90upx;
	}

	.allTitles {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		color: #333333;
		font-weight: 700;
		font-size: 16px;
	}

	.leftS {
		width: 8upx;
		height: 60upx;
		background: #333333;
		margin-right: 20upx;
		float: left;
	}

	.navItemList view {
		text-align: center;
	}

	.textItems,
	.username,
	.ImgCont,
	.looks,
	.videoCont {
		width: 100%;
	}

	.itemsLists {
		width: 100%;
		padding: 16rpx 0;
		border-bottom: 1upx solid #F2F2F2;
		overflow: hidden;
		margin-bottom: 10rpx;

		&:nth-last-child(1) {
			border: none;
		}
	}

	.leftHeadImg image {
		width: 250upx;
		height: 190upx;
		border-radius: 10upx;
	}

	.textCont {
		padding: 20upx 0;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		max-height: 130upx;
		text-align: justify;
	}

	.ImgCont image:last-child {
		margin-right: 0;
	}

	.looks {
		overflow: hidden;
		margin-top: 10rpx;
	}

	.leftDate {
		float: left;
		color: #666666;
		font-size: 24upx;
	}

	.leftDate text {
		margin-right: 10upx;
	}

	.rightData {
		float: right;
	}

	.rightData view {
		float: left;
		color: #666666;
		font-size: 24upx;
		margin-right: 20upx;
	}

	/** jh **/
	.leftHeadImg {
		width: 250upx;
		margin-right: 20upx;
		display: inline-block;
		height: 190upx;
	}

	.rightText {
		width: 420upx;
		display: inline-block;
		max-height: 190upx;
	}


	.username0 p {
		font-weight: 700;
		font-size: 32upx;
		white-space: normal;
		text-align: justify;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.username1 {
		font-weight: 700;
		font-size: 32upx;
		white-space: normal;
		text-align: justify;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 44upx;
		max-height: 88upx;
		margin-bottom: 16upx;
	}

	.imgAll {
		margin-right: -14upx;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		height: 192upx;
	}

	.imgAll image {
		width: calc(33.33% - 14upx);
		margin-right: 14upx;
		display: inline-block;
		height: 192upx;
		border-radius: 10upx;
	}

	.imgOne image {
		height: 360upx;
		border-radius: 10upx;
	}

	.rl {
		max-height: 190upx;
	}
</style>
